<template>
	<view class="real_name">
		<view class="main">
			<view class="input">
				<view class="left">真实姓名</view>
				<view class="right">
					<u-input v-model="name" disabled type="text" :clearable='false' placeholder='上传身份证自动识别姓名' />
				</view>
			</view>
			<view class="input">
				<view class="left">身份证号</view>
				<view class="right">
					<u-input v-model="card" disabled type="idcard" :clearable='false' placeholder='上传身份证自动识别身份证号码' />
				</view>
			</view>
			<view class="input">
				<view class="left">身份证头像面</view>
				<view class="right"></view>
			</view>
			<view class="up_img">
				<view class="img_url" v-if="url">
					<image :src="url" mode="aspectFit"></image>
					<view class="icon" @click="delImgBtn">
						<u-icon name="close-circle-fill" color="#f55800" size="50"></u-icon>
					</view>
				</view>
				<view class="img_url" v-else @click="uploadImage">
					<image src="@/static/images/up_card.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="change_txt">
			<image v-if="changeIndex" @click="changeBtn" src="@/static/images/change_icon2.png" mode=""></image>
			<image v-else @click="changeBtn" src="@/static/images/change_icon1.png" mode=""></image>
			<text class="tip">我已阅读并同意</text>
			<text class="txt" @click="textBtn(3)">《用户服务协议》</text>
		</view>
		<!-- 底部 -->
		<BottomBtn title='提交认证' @submit='submitBtn'></BottomBtn>
	</view>
</template>

<script>
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	export default {
		components:{
			BottomBtn
		},
		data() {
			return {
				name:"",
				card:'',
				url:'',
				requestId:'',
				changeIndex:false,
			};
		},
		methods:{
			//
			textBtn(val){
				uni.navigateTo({
					url:'/pages/other/text?type='+val
				})
			},
			delImgBtn(){
				var that = this
				that.$tips.showLoading('删除中')
				var params = {
					requestId:that.requestId
				}
				that.$httpApi.delCertificationImg(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.$tips.showToast('删除成功')
						that.name=''
						that.card=''
						that.url=''
						that.requestId=''
					}
				})
			},
			uploadImage(){
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.$tips.showLoading('上传中')
						const uploadTask = uni.uploadFile({
							url: that.$baseVal.baseUrl+'/api/Common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							formData: {
								'type':'id_card'
							},
							success: function(uploadFileRes) {
								that.$tips.hideLoading()
								var res = JSON.parse(uploadFileRes.data)
								if(res.code==1){
									that.infoData(res.data)
								}else{
									that.$tips.showToast('图片不合法')
								}
							}
						});
					},
					error: function(e) {
						// console.log(e);
					}
				})
			},
			infoData(info){
				this.name=info.name
				this.card=info.IDNumber
				this.url=info.image
				this.requestId=info.requestId
			},
			// 
			changeBtn(type){
				this.changeIndex=!this.changeIndex
			},
			// 底部按钮
			submitBtn(){
				var that = this
				if(that.requestId==''){
					that.$tips.showToast('请完善认证信息')
					return
				}else if(!that.changeIndex){
					that.$tips.showToast('请阅读并同意协议')
					return
				}else{
					that.$tips.showLoading('认证中')
					var params = {
						requestId:that.requestId,
					}
					that.$httpApi.certification(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							that.$tips.showToast('认证成功')
							that.$store.dispatch('GetUserInfo')
							setTimeout(function(){
								uni.navigateBack()
							},2000)
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.real_name{
		width: 100%;
		padding-top: 24rpx;
		.main{
			width: 100%;
			padding: 20rpx 44rpx;
			background: #fff;
			.input{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				.left{
					width: 200rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				.right{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					u-input{
						width: 100%;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
				}
			}
			.up_img{
				width: 100%;
				padding-bottom: 20rpx;
				.img_url{
					position: relative;
					width: 380rpx;
					height: 240rpx;
					margin: auto;
					border: 1px solid #eee;
					border-radius: 10rpx;
					image{
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					.icon{
						position: absolute;
						top: 0;
						right: 0;
						width: 50rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
		.change_txt{
			width: 100%;
			margin-top: 30rpx;
			padding: 0 32rpx;
			display: flex;
			image{
				display: block;
				width: 40rpx;
				height: 40rpx;
			}
			.tip{
				padding-left: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #888888;
			}
			.txt{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #0EBD8D;
			}
		}
	}
</style>
